<template>
	<view class="home">
		<view class="head-first">
			<view class="winfo">
				<span class="font">{{time}}好</span> <span class="nick"> {{nickName}} </span>
			</view>
			<uni-search-bar placeholder="输入水果名称" class="search" radius="18" @confirm="search" v-model="search_val">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
			</uni-search-bar>
		</view>
		<view class="sclo">
			<swiper :indicator-dots="true" :autoplay="true" class="swiper" circular="true">
				<swiper-item v-for="banner in banners" :key="banner.pid">
					<image :src="banner.bannerImg" :alt="banner.name" class="banner-image" mode="widthFix"></image>
					<view class="swiper-name">
						{{banner.name}}
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="identify">
			<view class="card">
				<view class="text">
					<span class="text-s">水果识别</span>
				</view>
			</view>
			<view class="identify-area">
				<view class="image" @click="image">
					<image class="image1" src="../../static/照相机.png" mode="widthFix"></image>
				</view>
				<view class="text-p">
					点击上传照片
				</view>
			</view>
		</view>

		<view class="hot">
			<view class="card">
				<view class="text">
					<span class="text-s">热门新闻</span>
				</view>
			</view>
			<view class="his-up" v-if="hotgoods.length === 0">
				看起来还没有新闻，先逛逛吧！
			</view>
			<view class="his-down" v-else>
				<view class="news-for" v-for="item in hotgoods" :key="item.id">
					<view class="news" @click="infof(item.tite,item.image,item.id)">
						<image class="news-image" :src="item.image" mode="widthFix"></image>
						<view class="news-text">
							<view class="title">
								{{item.tite}}
							</view>
							<view class="stitle">
								{{item.stitle}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<!-- 接下来开始改拍照按钮和历史以及搜索 -->
<script>
	export default {
		onShow() {
			this.getuser();
			let date = new Date();
			if (date.getHours() >= 6 && date.getHours() < 10) {
				this.time = "早上"
			} else if (date.getHours() >= 10 && date.getHours() < 14) {
				this.time = "中午"
			} else if (date.getHours() >= 14 && date.getHours() < 18) {
				this.time = "下午"
			} else if (date.getHours() >= 18 && date.getHours() < 23) {
				this.time = "晚上"
			} else {
				this.time = "熬夜了"
			}
		},
		data() {
			return {
				list: [],
				nickName: "",
				time: "",
				banners: [{
						"bannerImg": "../../static/草莓.jpg",
						"name": "草莓",
						"pid": "rena_ice003"
					},
					{

						"bannerImg": "../../static/西瓜.jpg",
						"name": "西瓜",
						"pid": "rena_ice002"
					},
					{
						"bannerImg": "../../static/香蕉.jpg",
						"name": "香蕉",
						"pid": "coffee001"
					},
					{
						"bannerImg": "../../static/菠萝.jpg",
						"name": "菠萝",
						"pid": "coffee003"
					}
				],
				search_val: "",
				hotgoods: [{
						"id": 1,
						"tite": "水果顶流阳光玫瑰，凉了",
						"image": "../../static/阳光玫瑰.jpg",
						"stitle": "昔日“顶流”、它的价格是怎么一步步降至现在？"
					},
					{
						"id": 2,
						"tite": "1.4万吨柬埔寨龙眼已出口中国！",
						"image": "../../static/龙眼.jpg",
						"stitle": "去年10月27日至今年10月27日，柬埔寨已累计向中国出口了1.4万吨新鲜龙眼。"
					}
				],
				index: 0,
				file: "",
			}
		},
		methods: {
			getuser() {
				uni.request({
					url: 'http://www.kangliuyong.com:10002/findMy', //仅为示例，并非真实接口地址。
					data: {
						appkey: 'U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=',
						tokenString: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 'A001') {
							this.nickName = res.data.result[0].nickName
						} else if (res.data.code === 700) {
							this.nickName = "访客用户"
						}
					}
				});
			},
			search() {
				uni.setStorageSync('search_val', this.search_val)
				uni.switchTab({
					url: '/pages/menu1/menu1'
				});
			},
			infof(name, image, id) {
				const mid = {
					'id': id,
					'title': name,
					'image': image,
					'tag': "news"
				}
				uni.setStorageSync('name', mid)
				uni.navigateTo({
					url: '../infomation/infomation'
				});
			},
			send() {
				uni.uploadFile({
					url: 'http://localhost:9090/test/imag', //服务器地址
					fileType: "image", //ZFB必填,不然报错
					filePath: this.file, //这个就是我们上面拍照返回或者先中照片返回的数组
					name: 'imgFile',
					success: (uploadFileRes) => {
						console.log("success!")
					}
				});

			},
			image() {
				const str = uni.getStorageSync("token")
				if (str === '') {
					uni.navigateTo({
						url: "../login/login"
					})
				} else {
					uni.chooseImage({
						count: 9,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
						success: (res) => {
							uni.uploadFile({
								url: 'http://localhost:9090/test/imag', //服务器地址
								fileType: "image", //ZFB必填,不然报错
								filePath: res.tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
								name: 'imgFile',
								formData: {
									'tokenString': uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									console.log("success!")
								}
							});
						}
					});
				}
			},
		},
	}
</script>

<style lang="scss">
	.head-first {
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 3px; */
		background-color: #fff;
		border-bottom: 1px solid #999;

		.winfo {
			margin-top: 15px;
			margin-left: 5px;
			font-weight: bold;

			.font {
				/* font-weight: bold; */
				color: #8f8b8b;
			}

			.nick {
				color: #0c34ba;
				font-size: 8px;
				/* margin-bottom: px; */
				width: 60px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis !important;
			}
		}

		.search {
			/* width: 60%; */
			flex: 1;
		}

		::v-deep .uni-searchbar__box {
			justify-content: flex-start;

			.uni-searchbar__box-icon-search {
				padding: 0 0 0 8px;

				.uni-icons {
					color: #0c34ba !important;
				}
			}
		}
	}

	.sclo {
		display: flex;
		justify-content: space-between;
		padding: 10px;

		.swiper {
			width: 100%;
			height: 280px;
			position: relative;

		}

		::v-deep .uni-swiper-dots {
			left: 83%;
			padding-bottom: 5px;
		}

		.banner-image {
			width: 100%;
			height: 100%;
			display: flex;
			position: absolute;
			z-index: -1;
			object-fit: cover;
			border-radius: 10px;
		}

		.swiper-name {
			position: absolute;
			text-align: center;
			margin-top: 240px;
			margin-left: 10px;
			padding: 4px 8px;
			color: white;
			border-radius: 45px;
			background-color: #0c34ba;
		}
	}

	.identify {
		padding: 10px;

		.card {
			display: flex;
			height: 50px;
			margin-bottom: 10px;
			position: sticky;
			top: 0;
			z-index: 999;
			background-color: #fff;

			.text {
				width: 40%;
				height: 40px;
				margin-top: 10px;
				display: flex;
				justify-content: center;
				border-radius: 0 20px 0 0;
				align-items: center;
				color: aliceblue;
				font-weight: bold;
				background-color: #0c34ba;
			}
		}

		.identify-area {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 300px;
			background-color: #fff;
			border-radius: 4%;

			.image {
				width: 100%;
				margin-left: calc(100vw - 100px);

				.image1 {
					width: 80px;
					color: #0c34ba;
				}
			}

			.text-p {
				color: #0c34ba;
			}
		}
	}

	.hot {
		padding: 10px;

		.card {
			display: flex;
			height: 50px;
			margin-bottom: 10px;
			position: sticky;
			top: 0;
			z-index: 999;
			background-color: #fff;

			.text {
				width: 40%;
				height: 40px;
				margin-top: 10px;
				display: flex;
				justify-content: center;
				border-radius: 0 20px 0 0;
				align-items: center;
				color: aliceblue;
				font-weight: bold;
				background-color: #0c34ba;
			}
		}

		.his-up {
			color: #8f8b8b;
			font-size: 15px;
			text-align: center;
			font-weight: 5px;
		}

		.his-down {
			.news-for {
				padding-bottom: 10px;
				padding-top: 10px;

				.news {
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					border-radius: 8px;

					.news-image {
						width: 40%;
						height: 30%;
					}

					.news-text {
						width: 58%;
						display: flex;
						padding: 10px;
						flex-direction: column;

						.title {
							width: 100%;
							color: #0c34ba;
							font-family: 黑体;
							font-weight: bold;
							font-size: 18px;
							margin-bottom: 10%;
						}

						.sttitle {
							width: 100%;
							color: #8f8b8b;
							font-size: 10px;
						}
					}
				}
			}
		}
	}

	::v-deep .uni-swiper-dot {
		width: 24px;
		border-radius: 2px;
		background-color: #5e5eba;
	}

	::v-deep.uni-swiper-dot-active {
		background-color: #0c34ba;
	}
</style>